<template>
  <div class="usermessage">
    <!-- 搜索及新建 -->
    <div class="usermessageUp">
      <div class="establish">
        <el-button type="primary" icon="el-icon-plus" @click="establish"
          >新建</el-button
        >
      </div>
      <div class="seach">
        <el-input
          placeholder="请输入搜索内容"
          clearable
          v-model="code"
          class="seachInput"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="seachBtn(code)"
          ></el-button>
        </el-input>
      </div>
    </div>
    <!-- 表格 -->
    <div class="usermessageList">
      <tableList
        @isshow="userInfo"
        @PassIsshow="passWordInfo"
        :list="userInfoList"
      ></tableList>
    </div>
    <!-- 分页 -->
    <div class="pagelist">
      <pageList :list="page" ref="pagelist" />
    </div>
    <!-- 新建模态框 -->
    <div class="establishMenu" v-if="userInfoShow">
      <EstablishMenu />
    </div>
    <!-- 修改用户信息模态框 -->
    <div class="modifyUser">
      <User />
    </div>
    <!-- 修改用户密码模态框 -->
    <div class="modifyPassword">
      <PassWord />
    </div>
  </div>
</template>

<script>
import mitt from "@/utils/mitt";
import { setStorage } from "@/utils/h5";
import tableList from "../tableMenu/TableList.vue";
import pageList from "../tableMenu/PageList.vue";
import EstablishMenu from "./Establish.vue";
import User from "./User.vue";
import PassWord from "./Password.vue";
import { userInfo, seachUser } from "@/network/api/userme/userme";
export default {
  name: "Usermessage",
  components: {
    tableList,
    pageList,
    EstablishMenu,
    User,
    PassWord,
  },
  created() {
    this.userMenu();
    // console.log(user.data.data.usermessages);
  },
  data() {
    return {
      code: "",
      userInfoShow: false,
      modifyPassword: false,
      userInfoList: [],
      page: {},
      num: 1,
      curt: 5,
    };
  },
  methods: {
    async userMenu() {
      mitt.on("page", async (res) => {
        this.num = res;
        let user = await userInfo(this.curt, this.num);
        console.log(user, 111111111111);
        this.userInfoList = user.data.data.usermessages;
        // console.log(user, 999999);
      });
      mitt.on("currt", async (res) => {
        this.curt = res;
        // console.log(user,222222222222);
        let user = await userInfo(this.curt, this.num);
        this.userInfoList = user.data.data.usermessages;
      });
      let user = await userInfo(this.curt, this.num);
      this.userInfoList = user.data.data.usermessages;
      // console.log(user.data.data, "列表数据1111");
      this.page = user.data.data;
      // console.log(this.page);
      setStorage("userinfo", this.userInfoList);
    },
    // 搜索
    async seachBtn(data) {
      // console.log(data, "搜索的值");
      let seachUserInfo = await seachUser(data);
      console.log(seachUserInfo, "搜索的值");
      this.userInfoList = seachUserInfo.data.data.usermessages;
      this.$refs.pagelist.total = seachUserInfo.data.data.usermessages.length;
      // this.$router.go(0);
      // console.log(this.$refs.pagelist);
    },
    // 新建
    establish() {
      this.userInfoShow = !this.userInfoShow;
      mitt.on("isshow", (res) => {
        console.log(res, "关闭");
        this.userInfoShow = res;
      });
    },
    userInfo(data) {
      this.modifyUser = data;
    },
    passWordInfo(data) {
      this.modifyPassword = data;
    },
  },
};
</script>

<style scoped lang='scss'>
.usermessage {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .usermessageUp {
    width: 100%;
    display: flex;
    margin-bottom: 40px;
    // 新建
    .establish {
      width: 80px;
      height: 40px;
      margin-right: 40px;
      .el-button {
        width: 100%;
        height: 100%;
        padding: 0;
        text-align: center;
      }
    }
    // 搜索
    .seach {
      width: 40%;
    }
  }
  .establishMenu,
  .modifyUser,
  .modifyPassword {
    width: 100%;
    position: absolute;
    top: 200px;
    left: 130px;
  }
  .usermessageList {
    margin-bottom: 10px;
  }
  .pagelist {
    text-align: center;
  }
}
</style>